<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="14">
          <el-form-item label="楼盘名称" prop="flatName">
            <template>
              <label>楼盘名称:<input v-model="formData.flatName" class="lineinput" style="width:200px" size="mini"></label>
              <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler"
                         :scroll-wheel-zoom="true"
                         @click="clickEvent"
                         ak="gCp7NMFEdRgeabbmbESwXHtly6obtTGg">
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
                <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :showAddressBar="true" :autoLocation="true" @locationSuccess="getLoctionSuccess" ></bm-geolocation>
                <bm-view :style="{width:'100%',height: '300px',flex: 1,marginTop:'0px'}"></bm-view>
                <bm-local-search :keyword="formData.flatName" :auto-viewport="false" :location="formData.flatName" style="height: 150px;overflow-y: scroll;margin: 2px 0"></bm-local-search>
              </baidu-map>
              <div class="demo-input-suffix" style="margin-top: 2vh">
                <el-link type="info">经度：</el-link><el-input  class="lineinput"  style="width:200px" size="mini" v-model.number="locData.longitude" :disabled="true"></el-input>
                <el-link type="info"> 纬度：</el-link><el-input  class="lineinput"  style="width:200px" size="mini" v-model.number="locData.latitude" :disabled="true"></el-input>
                <el-link type="info"> 位置：</el-link><el-input  class="lineinput"  style="width:200px" size="mini" v-model="locData.address" :disabled="true"></el-input>
              </div>

            </template>
            <el-button type="info" @click="changeUrl"> 添加楼盘</el-button>
          </el-form-item>


        </el-col>
        <!--<iframe name="iframeA" :src=url frameborder="0"  style="width: 100%;height:500px;" scrolling="no" ref="mapFrame"></iframe>-->
        <el-col :span="12">
          <el-form-item label="" prop="type">
            <el-radio-group v-model="formData.type" size="medium" >
              <el-radio label="0" @change="changeRadio(0)" >整租</el-radio>
              <el-radio label="1" @change="changeRadio(1)" >合租</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="" prop="status">
            <el-radio-group v-model="formData.status" size="medium">
              <el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="楼栋号" prop="buildingNo">
            <el-input v-model="formData.buildingNo" placeholder="请输入楼栋号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单元号" prop="unitNo">
            <el-input v-model="formData.unitNo" placeholder="请输入单元号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="门牌号" prop="roomNo">
            <el-input v-model="formData.roomNo" placeholder="请输入门牌号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="户型 室" prop="room">
            <el-select v-model="formData.room" placeholder="请选择户型" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in roomOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="厅" prop="hall">

            <el-select v-model="formData.hall" placeholder="请选择" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in hallOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="装修情况" prop="leaseType">
            <el-select v-model="formData.leaseType" placeholder="请选择装修情况" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in leaseTypeOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="楼层" prop="floor">
            <el-input-number v-model="formData.floor" placeholder="楼层"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="共" prop="floorCount">
            <el-input-number v-model="formData.floorCount" placeholder="共"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="设置管家" prop="manager">
            <el-select v-model="formData.manager" placeholder="请选择设置管家" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in managerOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="房产面积" prop="proportion">
            <el-input v-model="formData.proportion" placeholder="请输入房产面积" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="租金" prop="rental" v-show="shows">
            <el-input v-model="formData.rental" placeholder="请输入租金" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="付款方式  押" prop="paymentMortgage">
            <el-select v-model="formData.paymentMortgage" placeholder="请选择付款方式" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in paymentMortgageOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="付" prop="paymentPay">
            <el-select v-model="formData.paymentPay" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in paymentPayOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="公共配套" prop="publicfacility">
            <el-checkbox-group v-model="formData.publicfacility" size="medium">
              <span v-for="item in publicFacilityOptions">
                <el-checkbox  :value="item.value" :label="item.value">{{item.label}}</el-checkbox>
              </span>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="房间配套" prop="privatefacility" v-show="shows">
            <el-checkbox-group v-model="formData.privatefacility" size="medium">
              <span v-for="item in privateFacilityOptions">
                <el-checkbox   :value="item.value" :label="item.value">{{item.label}}</el-checkbox>
              </span>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="房间区域图片" prop="frontCover" required v-show="shows">
            <el-upload
              class="avatar-uploader"
              action="http://localhost/dev-api/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="公共区域图片" prop="pictureUrl" required>
            <el-upload
              class="avatar-uploader"
              action="http://localhost/dev-api/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccesss"
              :before-upload="beforeAvatarUploads">
              <img v-if="imageUrls" :src="imageUrls" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="房源介绍" prop="introduce">
            <el-input v-model="formData.introduce" type="textarea" placeholder="请输入房源介绍" :maxlength="100"
              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
  import {addDistract,getPublicFacilityOptions,getPrivateFacilityOptions,getManagerOptions } from "@/api/termination/distract";
  import {BaiduMap,BmNavigation,BmView,BmGeolocation,BmCityList,BmLocalSearch} from 'vue-baidu-map'
  import {Pagination} from "element-ui";
  export default {

  components: {},
  props: [],
  data() {
    return {
      center: {lng: 111.752912, lat: 40.832246},
      zoom: 12,
      mapVisible:false,
      locData:{
        longitude:'',
        latitude:'',
        address:'',
      },
      iconUrl:'http://api0.map.bdimg.com/images/marker_red_sprite.png',
      imageUrl:"",
      imageUrls:"",
      shows:true,
      url:"https://map.baidu.com/@12961205,4823961,13z",
      formData: {
        publicfacility:[],
        privatefacility:[],
        flatName: '',
        type: undefined,
        status: undefined,
        buildingNo: undefined,
        unitNo: undefined,
        roomNo: undefined,
        room: undefined,
        hall: undefined,
        leaseType: undefined,
        floor: undefined,
        floorCount: undefined,
        manager: undefined,
        proportion: undefined,
        rental: undefined,
        paymentMortgage: undefined,
        paymentPay: undefined,
        publicFacility: "",
        privateFacility: "",
        frontCover: null,
        pictureUrl: null,
        introduce: undefined,
      },
      rules: {
        flatName: [{
          required: true,
          message: '请输入楼盘名称',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '不能为空',
          trigger: 'change'
        }],
        status: [{
          required: true,
          message: '不能为空',
          trigger: 'change'
        }],
        buildingNo: [],
        unitNo: [],
        roomNo: [],
        room: [{
          required: true,
          message: '请选择户型',
          trigger: 'change'
        }],
        hall: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        leaseType: [{
          required: true,
          message: '请选择装修情况',
          trigger: 'change'
        }],
        floor: [{
          required: true,
          message: '楼层',
          trigger: 'blur'
        }],
        floorCount: [{
          required: true,
          message: '共',
          trigger: 'blur'
        }],
        manager: [{
          required: true,
          message: '请选择设置管家',
          trigger: 'change'
        }],
        proportion: [{
          required: true,
          message: '请输入房产面积',
          trigger: 'blur'
        }],
        rental: [{
          required: true,
          message: '请输入租金',
          trigger: 'blur'
        }],
        paymentMortgage: [{
          required: true,
          message: '请选择付款方式',
          trigger: 'change'
        }],
        paymentPay: [{
          required: true,
          message: '',
          trigger: 'change'
        }],
        publicfacility: [{
          required: true,
          type: 'array',
          message: '请至少选择一个公共配套',
          trigger: 'change'
        }],
        privatefacility: [{
          required: true,
          type: 'array',
          message: '请至少选择一个房间配套',
          trigger: 'change'
        }],
        introduce: [{
          required: true,
          message: '请输入房源介绍',
          trigger: 'blur'
        }],
      },
      typeOptions: [{
        "label": "整租",
        "value": 0
      }, {
        "label": "合租",
        "value": 1
      }],
      statusOptions: [{
        "label": "已出租",
        "value": 0
      }, {
        "label": "未出租",
        "value": 1
      }],
      roomOptions: [{
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }, {
        "label": "3",
        "value": 3
      }, {
        "label": "4",
        "value": 4
      }, {
        "label": "5",
        "value": 5
      }, {
        "label": "6",
        "value": 6
      }, {
        "label": "7",
        "value": 7
      }, {
        "label": "8",
        "value": 8
      }, {
        "label": "9",
        "value": 9
      }],
      hallOptions: [{
        "label": "0",
        "value": 0
      }, {
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }],
      leaseTypeOptions: [{
        "label": "精装",
        "value": 0
      }, {
        "label": "简装",
        "value": 1
      }, {
        "label": "毛坯",
        "value": 2
      }],
      managerOptions: [],
      paymentMortgageOptions: [{
        "label": "0",
        "value": 0
      }, {
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }, {
        "label": "3",
        "value": 3
      }],
      paymentPayOptions: [{
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }, {
        "label": "3",
        "value": 3
      }, {
        "label": "4",
        "value": 4
      }, {
        "label": "5",
        "value": 5
      }, {
        "label": "6",
        "value": 6
      }],
      publicFacilityOptions: [],
      privateFacilityOptions: [],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getPublicFacilityOptions();
    this.getPrivateFacilityOptions();
    this.getManagerOptions();
  },
  mounted() {},
  methods: {
    changeUrl(){
      this.$router.push("/loupan/addloupan")
    },
    changeRadio(value){
      if(value==0){
        this.shows=true
      }
      if(value==1){
        this.shows=false
      }
    },
    getManagerOptions(){
      getManagerOptions().then(resp=>{
        this.managerOptions = resp.data
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.formData.frontCover = res.data.url
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccesss(res, file) {
      this.imageUrls = URL.createObjectURL(file.raw);
      console.log(res)
      this.formData.pictureUrl = res.data.url;
    },
    beforeAvatarUploads(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    getPublicFacilityOptions(){
      getPublicFacilityOptions().then(resp=>{
        this.publicFacilityOptions = resp.data
      })
    },
    getPrivateFacilityOptions(){
      getPrivateFacilityOptions().then(resp=>{
        this.privateFacilityOptions = resp.data
      })
    },
    submitForm() {
      this.formData.publicFacility = this.formData.publicfacility.join();
      this.formData.privateFacility=this.formData.privatefacility.join();
      this.$refs['elForm'].validate(valid => {
        if (valid){
          addDistract(this.formData).then(resp=>{
            if(resp>0){
              alert("添加成功")
            }else{
              alert("添加失败")
            }
          })
        }else{
          alert("表单内信息不完整")
        }
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    handler ({BMap, map}) {
      let _this = this;  // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
      let geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
        console.log(r);
        _this.center = {lng: r.longitude, lat: r.latitude};   // 设置center属性值
        _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};  // 自定义覆盖物
        _this.initLocation = true;
      },{enableHighAccuracy: true})
      window.map = map;
    },
    //点击地图监听
    clickEvent(e){
      map.clearOverlays();
      let Icon_0 = new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 25)});
      let myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});
      map.addOverlay(myMarker);
      //用所定位的经纬度查找所在地省市街道等信息
      let point = new BMap.Point(e.point.lng, e.point.lat);
      let gc = new BMap.Geocoder();
      let _this = this;
      gc.getLocation(point, function (rs) {
        let addComp = rs.addressComponents;
        _this.locData.address = rs.address;

      });
      this.locData.longitude = e.point.lng;
      this.locData.latitude = e.point.lat;
    },
//定位成功回调
    getLoctionSuccess(point, AddressComponent, marker){
      map.clearOverlays();
      let Icon_0 = new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
      let myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});
      map.addOverlay(myMarker);
      this.locData.longitude = point.point.lng;
      this.locData.latitude = point.point.lat;
    },
//返回选中点的位置
    findlocation(){
      this.$emit("findlocdata",this.locData)
      this.temp.location=this.keyword
      this.temp.lng=this.locData.longitude
      this.temp.lat=this.locData.latitude
      this.mapVisible = false
    },
  },
    components: {
      Pagination,
      BaiduMap,
      BmNavigation,
      BmView,
      BmGeolocation,
      BmCityList,
      BmLocalSearch
    },
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
